<template>
    <div class="da_dan_yuzhi">
        <div class="tab">
            <div>设置大单阈值</div>
            <i class="iconfonMy icon-guanbi1" @click="ipcRenderer.send('send-dadan-fazhi')"></i>
        </div>
        <div class="da_body">
            <div class="list_item">
                <span>大单阈值</span>
                <input id="ipputId" type="number" v-model="maxyuzhi" @input="hardYaznheng">
                <span>手</span>
            </div>
            <div class="list_item">设置为0时，执行系统默认参数</div>
        </div>
        <div class="btn">
            <div class="btn_item" @click="sumbit">确定</div>
            <div class="btn_item" @click="ipcRenderer.send('send-dadan-fazhi')">取消</div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ipcRenderer } from 'electron'

const maxyuzhi = ref(localStorage.getItem('daDanYuzhi') || 0)

document.addEventListener('keyup', (e) => {
    if (e.keyCode === 27) {
        ipcRenderer.send('send-dadan-fazhi')
    }
    if (e.keyCode === 13) {
        sumbit()
    }
})

function sumbit() {
    localStorage.setItem('daDanYuzhi', maxyuzhi.value)
    ipcRenderer.send('send-dadan-fazhi', maxyuzhi.value)
}

function hardYaznheng(v) {
    let value = v.target.value
    if (value < 0) {
        maxyuzhi.value = 0
    }
    if (!Number.isInteger(Number(value))) {
        maxyuzhi.value = Math.floor(Number(value));
    }
}

</script>

<style scoped lang="less">
.da_dan_yuzhi {
    width: 280;
    height: 170px;
    background-color: #f0f0f0;
    color: #000;
    overflow: hidden;

    .tab {
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 23px;
        padding-left: 5px;

        i {
            width: 23px;
            height: 23px;
            text-align: center;
        }
    }

    .da_body {
        padding: 20px 20px 15px 20px;

        .list_item {
            padding-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 25px;

            input {
                background-color: #fff;
                border-width: 1px;
                width: 90px;
                height: 18px;
                margin: 0 5px;
            }
        }
    }

    .btn {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 10px;

        .btn_item {
            margin-right: 10px;
            background-color: #fdfdfd;
            border: 1px solid #d9d9d9;
            border-radius: 3px;
            width: 75px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
        }

        .btn_item:active {
            background-color: #e0eef9;
            border-color: #0078d4;
        }
    }
}
</style>
